<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<meta name="apple-mobile-web-app-capable" content="yes"/>
		<meta name="apple-mobile-web-app-status-bar-style" content="black"/>
		
		<link rel="stylesheet" type="text/css" href="../css/mui.min.css"/>
		<link rel="stylesheet" type="text/css" href="../css/imageviewer.css"/>
		<link rel="stylesheet" type="text/css" href="../css/font-awesome.min.css"/>
		<title>商品页</title>
		<style type="text/css">
			*{margin: 0 0;padding: 0 0;width: 100%;}
			header span{background: rgb(255,241,240);}
			.mui-content{height:100%;background: lightgrey;padding-bottom: 8%;}
			.mui-scroll{}
			.mui-slider .mui-slider-group .mui-slider-item{background: rgb(255,251,240);}
			.baseMation{width: 100%;height: 28%;background: rgb(255,251,240);margin-top: 0;padding: 2% 5%;border-bottom: lightgray 1px solid;}
			.mui-col-xs-12{word-wrap: break-word;word-break: normal;padding: 0 1%;}
			.mui-col-xs-12 > p{text-indent:2em; color: black;}
			.mui-col-xs-7{padding: 0 1%;margin-top: -3%; line-height: 80%;}
			.mui-col-xs-7 > *{width: auto;line-height:100%;}
			.mui-col-xs-7 > span{margin: 6% auto;font-size: 12px;background: red;color: white;border-radius: 5%;}
			.mui-col-xs-6{margin-top:-3%;padding: 0 0;}
			.oldprice{margin: 0 2%;font-size: 12px;color: gray;background: white;text-decoration: line-through;}
			.mui-col-xs-10 span{ width: auto;font-size: 12px;color: orangered; }
			.mui-col-xs-12 >p{color: black; font-size: 14px;width: auto;}
			.mui-table-view-cell{margin: 5% 0;width: 100%;height: 7%;}
			.selectSpec{margin-top: 3%;margin-bottom: 3%;}
			.selectSpec > .mui-pull-left{width: 80%;color: rgb(0,20,15);}
			.selectSpec > .mui-pull-right{width: 20%; text-align: right;color: darkgray;}
			.shopElse{width: 100%;background: rgb(255,251,240);border-bottom: 1px solid lightgray; border-top: 1px solid lightgray;margin-bottom: 3%;}
			.shopElse > .jxlogo{height: 15vh;padding: 2% 2%;width: 100%;border-bottom: 1px lightgray solid;}
			.jxlogo > img{width: 20%;height: auto;border-radius: 50%;margin-right: 5%;}
			.shopElse > .jxlogo > p,span{width: 60%;margin: 2% auto;}
			.shopElse > .jxlogo > p{color: black; font-size: 16px;}
			.shopElse > .jxlogo > span{color: gray;font-size: 14px;}
			.shopElse > .elseLink{height: 8vh;padding: 2% 5%;}
			.elseLink > button{width: 35%;border: 1px solid gray;}
			
			.goodDetail{width: 100%; background: rgb(255,251,240);border-bottom: 1px solid lightgray;border-top: 1px solid lightgray;}
			.rateddes{width: 100%;background: rgb(255,245,251);border-top: 1px solid lightgrey;border-bottom: 1px solid lightgrey;border-radius: 3%;}
			.rateddes > p{margin: 2% 0;}
			.rateddes > .ratecontent{word-wrap: break-word; word-break: normal;text-indent: 2em;}
			#goodrecommend{background: white;}
			#goodrecommend > .mui-row{height: 100%;}
			#goodrecommend > .mui-row > .mui-col-xs-5{height: 20%;background: rgb(240,235,230);list-style: none;margin: 4%;padding: 3% 0;}
			#goodrecommend > .mui-row > .mui-col-xs-5 > img{width: 80%;margin: 1% auto;display: block;}
			#goodrecommend > .mui-row > .mui-col-xs-5 > p{margin-bottom: 0;font-size: 12px;word-wrap: break-word;word-break: normal;width: 50%;}
			
			#specMenu{background:rgb(240,235,223);width: 100%;padding: 0 5%;padding-bottom: 5vh;}
			#specMenu > img{width: 65px;height: auto;margin-top:-25px;display: block;padding: 2px;margin-left: 8px;border: 3px solid rgb(210,215,213);background: white;border-radius: 10px;}
			#specMenu > p{width: 40%;}
			#specMenu > .mui-pull-right{text-align: right;}
			#specMenu > .mui-numbox{height: 24px;}
			#specMenu > [href='javascript:;']{width: 50%;border-radius: 0;height: 5vh; position: fixed;bottom: 0;}
			.join_cart{left: 0;}
			#specMenu > .buy{right: 0;text-align: center;}
			.endPay{position: fixed;bottom: 0;left: 0;width: 100%;z-index: 99;}
			.endPay > a{width: 50%;border-radius: 0;}
			.endPay > .buy{}
			
			.mui-zoom-scroller{background: black;}
		</style>
	</head>
	<body ms-controller="good">
		<header class="mui-bar mui-bar-nav">
			<span class="mui-icon mui-icon-back mui-pull-left" onclick="back()" style="width: 20%;margin: 0 0;"></span>
			<span class="mui-title">{{@title}}</span>
		</header>
		<div class="mui-content mui-scroll-wrapper">
			<div class="mui-scroll">
				<div class="mui-slider">
					<div class="mui-slider-group">
						<div class="mui-slider-item" ms-for="item in @swipe">
							<img ms-attr="{src:@imgPath+item.picurl}" data-preview-src="" data-preview-group='1'/>
						</div>
					</div>
					<div class="mui-slider-indicator">
						<div class="mui-indicator mui-active"></div>
						<div class="mui-indicator"></div>
						<div class="mui-indicator"></div>
						<div class="mui-indicator"></div>
					</div>
				</div>
				<!--基本信息栏-->
				<div class="baseMation">
					<div class="mui-row">
						<div class="mui-col-xs-12">
							<p>{{@title}}</p>
						</div>
						<div class="mui-col-xs-7">
							<h4 class="mui-pull-left">¥ {{@newprice}}</h4><span class="mui-pull-left">正宗包邮</span>
						</div>
						<div class="mui-col-xs-6">
							<span class="oldprice">¥ {{@oldprice}}</span>
						</div>
						<div class="mui-col-xs-10">
							<span class="mui-pull-left">热卖</span><span class="mui-icon mui-icon-checkmarkempty"></span>
						</div>
						<div class="mui-col-xs-12">
							<p class="mui-pull-left">销量：{{@sales}}</p>
							<p class="mui-pull-right">库存:{{@total}}</p>
						</div>
						<div class="mui-col-xs-8">
							<p>货号 : {{@goodnum}}</p>
							<!--限时销售功能-->
							<p></p>
						</div>
					</div>
				</div>
				<!--END-->
				
				<!--选择规格-->
				<div class="mui-table-view mui-table-view-cell selectSpec">
					<span class="mui-pull-left">请选择商品规格和数量</span>
					<span class="mui-icon mui-icon-arrowright mui-pull-right"></span>		
				</div>
				<!--End-->
				
				<!--商城信息-->
				<div class="shopElse">
					<div class="jxlogo">
						<img class="mui-pull-left" src="../images/attcment/jx_logo.png"/>
						<p class="mui-pull-left">就想官方商城</p>
						<span class="mui-pull-left">本类目下全部商品{{@cateCount}}款</span>
					</div>
					<div class="elseLink">
						<!--@事件-->
						<button type="button" class="mui-btn mui-btn-default mui-pull-left allGoods">全部商品</button>
						<button type="button" class="mui-btn mui-btn-default mui-pull-right goIndex">进入商城首页</button>
						<!--END-->
					</div>
				</div>
				<!--END-->
				<!--商品详情 评价 类目推荐-->
				<div class="goodDetail">
					<div class="mui-slider" id="slider">
						<div id="sliderSegmentedControl" class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
								<a href="#gooddetail" class="mui-control-item">商品详细</a>
								<a href="#goodrated" class="mui-control-item">客户评论</a>
								<a href="#goodrecommend" class="mui-control-item">同类推荐</a>
							</div>
							<div class="mui-slider-progress-bar mui-cox-xs-4"style="width: 33%;"></div>
							<div class="mui-slider-group">
								<div id="gooddetail" class="mui-slider-item mui-control-content mui-active">
									<img ms-for="item in @goodContent" ms-attr="{src:@imgPath+item}"/>
								</div>
								<div id="goodrated" class="mui-slider-item mui-control-content">
									<ul class="mui-table-view">
										<li class="mui-table-view-cell rateddes" ms-for="el in @rate" >
											<img style="width: 10%; border-radius: 50%;margin-left: 3%;" class="mui-pull-left" ms-attr="{src:el.avatar}" data-preview-src="" data-preview-group="3" />
											<p class="mui-pull-left rateicon" style="width: 80%;padding-left: 40%;margin: 0 0;">
												<span class="mui-icon FontAwesome icon-star-empty" style="color: orangered;font-size: 16px;"></span>
												<span class="mui-icon FontAwesome icon-star-empty" style="color: orangered;font-size: 20px;"></span>
												<span class="mui-icon FontAwesome icon-star-empty" style="color: orangered;font-size: 24px;"></span>
												<span class="mui-icon FontAwesome icon-star-empty" style="color: orangered;font-size: 28px;"></span>
												<span class="mui-icon FontAwesome icon-star-empty" style="font-size: 32px;"></span>
											</p>
											<p class="mui-pull-left" style="margin-top: 0px;">{{el.nickname}}</p>
											<p class="ratecontent">
												{{el.comment}}
											</p>
										</li>
									</ul>
								</div>
								<div id="goodrecommend" class="mui-slider-item mui-control-content">
								<div class="mui-row">
									<div class="mui-col-xs-5" ms-for="el in @others" ms-attr="{id:el.id}" >
										<img ms-attr="{src:@imgPath+el.thumb}" />
										<p style="width: 80%;margin: 0 auto; text-indent: 2em;font-size: 14px;color: black;font-weight: 500;word-break: break-all;display: -webkit-box; -webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;">{{el.title}}</p>
										<p class="mui-pull-left" style="text-align: left;text-align: center;">{{el.marketprice}}</p>
										<p class="mui-pull-right" style="text-align: left;text-decoration: line-through;">{{el.productprice}}</p>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<!--END-->
			</div>
	</div>
	<!--商品规格-->
			<div id="specMenu" class="mui-popover mui-popover-bottom mui-popover-action">
				<img src="../images/attcment/76side.jpg" data-preview-src="" data-preview-group="2" class="previewImage" />
				<p class="mui-pull-left">价格:¥ {{@newprice}}</p>
				<p class="mui-pull-right">库存: {{@total}}</p>
				<p class="mui-pull-left" style="line-height: 24px;">购买数量 :{{goodCount}}</p>
				<div class="mui-numbox mui-pull-right" data-numbox-min="0">
					<button class="mui-btn mui-numbox-btn-minus" type="button">-</button>
					<input type="number" class="mui-numbox-input spec_count" ms-duplex="@goodCount"  />
					<button class="mui-btn mui-numbox-btn-plus" type="button">+</button>
				</div>
				<!--接下来的是可能用不上的-->
				<!--规格项-->
				<!--END-->
				<a href="javascript:;" class="mui-btn mui-btn-danger mui-pull-left join_cart" type="button">加入购物车</a>
				<a href="javascript:;" class="mui-btn mui-btn-green mui-pull-right buy" type="button">立即购买</a>
			</div>	
			<!--END-->
			<!--结账-->
			<div class="endPay">
				<a href="Javascript:;" class="mui-btn mui-btn-danger mui-pull-left join_cart">
					加入购物车
				</a>
				<a href="javascript:;" class="mui-btn mui-btn-green mui-pull-left buy">
					立即购买
				</a>
			</div>
			<!--END-->
			<!--未名の大boss[隐藏表单]-->
				<input type="hidden" class="hideCount" />
				<input type="hidden" />
				<input type="hidden" />
			<!--END-->
	</body>
	<script src="../js/avalon.js"></script>
	<script src="../js/mui.min.js" ></script>
	<script src="../js/common.js"></script>
	<script src="../js/config.js"></script>
	<script src="../js/mui.zoom.js"></script>
	<script src="../js/mui.previewimage.js"></script>
	<script type="text/javascript">
		mui.init({
			swipeBack:true
		});
		//js控制dom高度
		var height = document.height;
		var shopElse = document.getElementsByClassName('shopElse')[0];
		var specMenu = document.getElementById('specMenu');
		shopElse.style.height = height*0.2+'px';
		specMenu.style.height = height*0.3+'px';
		
		
		//图片预览初始化
		mui('body').on('tap','.previewImage',function(){
			mui('#specMenu').popover('hide');
		});
		mui.previewImage();
		
		/*var vm =avalon.define({
			$id:"test",
			
			
		});*/
		
		var vm = avalon.define({
			$id:'good',
			title:'',
			swipe:[],
			newprice:'',
			oldprice:'',
			sales:'',
			total:'',
			goodnum:'',
			imgPath:'',
			cateCount:'',
			goodContent:'',
			rate:[],
			others:[],
			goodCount:''
		});  
		
		
		vm.imgPath = ipconfig().jpg;
		
		/**
		 * 商品规格选择事件 ps:头脑风暴来袭
		 * @param {Element} spec
		 * @param {Element} spec_count
		 * @param {Element} hide_count
		 */
		var spec = document.getElementsByClassName('selectSpec')[0];
		var spec_count = document.getElementsByClassName('spec_count')[0];
		var hide_count = document.getElementsByClassName('hideCount')[0];
		
		spec_count.addEventListener('change',function(){
			hide_count.value = this.value;
		});
		
		
		spec.addEventListener('tap',function(){
			mui('#specMenu').popover('show',document.getElementById('#specMenu'));
		});
		
		mui('.mui-scroll-wrapper').scroll({
			deceleration:0.005
		});
		
		mui.plusReady(function(){
			ws = plus.webview.currentWebview();
			wo = ws.opener();
			
			ws.show('pop-in');
			plus.nativeUI.closeWaiting();
			/**
			 * @return {RegExp} regstr   
			 * 使用正则匹配来判断其上级窗口是否是同级模板，如果是则关闭WV
			 */
			setTimeout(function(){
				var regstr = /goodDetail.\.html/;
				if(regstr.test(ws.openerid)){
					plus.webview.close(ws.openerid);
				}
			},1000);
			
			
			getData(ws.num);
		});
		
		//点击同类商品跳转
		mui('#goodrecommend').on('tap','.mui-col-xs-5',function(){
//			plus.nativeUI.showWaiting();
			var id = this.getAttribute('id');
			var webid = 'goodDetail'+id+'.html';
			//获取当前wv的id并作为参数传给新WV  以用来判断是否需要关闭旧的WV
			plus.nativeUI.showWaiting('加载中...');
			plus.webview.create('goodDetail.html',webid,{},{num:this.getAttribute('id'),openerid:ws.id});
			
		});
		
		//点击全部商品 跳转到列表页
		var allGoods = document.getElementsByClassName('allGoods')[0];
		allGoods.addEventListener('tap',function(){
			/**
			 * @param {String,listApi} API参数
			 * @param {String,} 列表页ID :由此链接打开的列表页功能不同，故而不应与分类列表页ID相同
			 */
			var listApi = 'CateGoods.getAllGoods';
			var listId = 'allcommon_cate.html';
			plus.webview.create('common_cate.html',listId,{},{api:listApi});
			
			listPage = plus.webview.getWebviewById('allcommon_cate.html');
			mui.fire(listPage,'show',{
				api:listApi
			});
		},false);
		
		//点击首页按钮 跳转到商城首页 [并关闭当前webview视口]
		var goIndex = document.getElementsByClassName('goIndex')[0];
		goIndex.addEventListener('tap',function(){
			//获取商城首页WV
			var indexWeb = plus.webview.getWebviewById('main');
			
			if(indexWeb){
				plus.webview.close(ws);
				if(wo.id =='common_catesub.html'){
					plus.webview.close(plus.webview.getWebviewById('common_cate.html'));
				}
//				plus.webview.show(indexWeb,'fad')
			}else{
				plus.nativeUI.showWaiting('加载中...');
				plus.webview.create('../main.html','main');
			}
			
			
		});
		
		/**
		 * 加入购物车功能
		 * ① 获取商品数量规格 获取用户token 
		 * ②将数据传入后台 判断商品是否存在 存在即加入数据库
		 */
		mui('body').on('tap','.join_cart',function(){
			var gCount = document.getElementsByClassName('hideCount')[0];
			if(gCount.value <= 0){
				//判断是否是弹出菜单中的加入购物车
				if(this.parentNode.className == 'endPay'){
					plus.nativeUI.toast('请选择数量');
					mui.trigger(spec,'tap');
				}else{
					plus.nativeUI.toast('请选择数量');
				}
			}else{
				//判断登录与否
				var token = plus.storage.getItem('jx_token');
				if(token){
					//获取商品属性规格
					var gid = ws.num;
					var total = gCount.value;
					var price = vm.newprice;
					var data = {gid:gid,total:total,market_price:price,session_id:token};
					
					//ajax调用接口
					mui.ajax(ipconfig().ip+'ActCart.joinCart',{
						data:data,
						dataType:'json',
						timeout:10000,
						type:'post',
						headers:{'Content-Type':'application/x-www-form-urlencoded'},
						success:function(data){
							if(data.data.code == 0){
								plus.nativeUI.toast('添加成功，快去看看吧');
							}
						},error:function(xhr,type,errorThrow){
							console.log(type);
						}
					});
				}else{
					plus.nativeUI.toast('客官，请先登陆');
					//跳转登陆页面
				}
			}
		});
		
		/**
		 * 立即购买
		 */
		mui('body').on('tap','.buy',function(){
			var gCount = document.getElementsByClassName('hideCount')[0];
			var token = plus.storage.getItem('jx_token');
			
			if(token){
				if(gCount.value<=0){
					if(this.parentNode.className == 'endPay'){
						plus.nativeUI.toast('请填写数量');
						mui.trigger(spec,'tap');
					}else{
						plus.nativeUI.toast('请填写数量');
					}
				}else{
					//进入订单页面 并传参数 gid 以及 total
					plus.nativeUI.showWaiting('加加加~加载中...');
					plus.webview.create('confirm.html','confirm.html',{},{gid:ws.num,total:gCount.value});
					
				}
			}else{
				plus.nativeUI.toast('请先登陆！');
				//跳转登陆页面
			}
		});
		
		
		/**
		 * getData
		 */
		var getData = function(gid){ 
			mui.ajax(ipconfig().ip+'CateGoods.getGoodDetail',{
				data:{gid:gid},
				dataType:'json',
				timeout:10000,
				type:'get',
				headers:{'Content-Type':'application/json'},
				success:function(data){
					if(data.data.code == 0){
//						console.log(data.data.detail.good.title);
						//avalon组件
						//又特么正则
						var data = data.data.detail;
						vm.title = data.good.title;
						vm.newprice = data.good.marketprice;
						vm.oldprice = data.good.productprice;
						vm.sales = data.good.sales;
						vm.total = data.good.total;
						vm.goodnum = data.good.goodssn;
						/**
						 *@param {Array} swipe,rate,others
						 */
						vm.swipe = data.goodPic;
						vm.rate = data.goodRate;
						vm.others = data.goodOther;
						
						vm.cateCount = data.goodOther.length;
						
						vm.goodContent = getSrc(data.good.content);
						
						//操作用户评价星级DOM
						var rateGrid = data.goodRate;
						var iconNode = document.getElementsByClassName('rateicon');
						mui.each(rateGrid,function(index,item){
							for(var j=0;j<item.rate;j++){
								iconNode[index].childNodes[j].className = 'mui-icon FontAwesome icon-star';
							}
						});
						//操作数量最大值属性 初始化动态表单	{失效}
						var num = document.getElementsByClassName('mui-numbox')[0];
						num.setAttribute('data-numbox-max',data.good.total);
						
						//手动初始化 轮播插件
						var gallery = mui('.mui-slider');
						gallery.slider({
							interval:0
						});
					}
				},
				error:function(xhr,type,errorThrow){
					console.log(type);
				}
			});
		}
		
		var getSrc = function(data){
			if(data.length == 0){
				return;
			}
			
			var Content = [];
			//regexp 匹配
			var goodDetail = data.match(/(jpg\/|gif\/|png\/).*?(\.jpg|\.gif|\.png)/g);
			//去除goodDetail重复元素
			for(var i = 0;i<goodDetail.length-1;i++){
				if(goodDetail[i]==goodDetail[i++]){
					Content.push(goodDetail[i]);
				}
			}
			return Content;
			
		};
		
		
	</script>
</html>
